<template>
  <div class="playMusic">
    <div
      class="bg"
      :style="{ backgroundImage: `url(${musicInfo.al.picUrl})` }"
    ></div>
    <!-- top -->
    <div class="topNav">
      <div class="back" @click="$emit('back')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div class="center">
        <div class="title">
          <marquee behavior="scroll" direction="left">{{
            musicInfo.name
          }}</marquee>
        </div>
      </div>
      <div class="share">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>
    <!-- content -->
    <div class="content">
      <img class="circle" src="./../assets/p1.png" alt="" />
      <img
        :class="isPlay ? 'needle' : 'active'"
        src="./../assets/p2.png"
        alt=""
      />
      <img class="ig" :src="musicInfo.al.picUrl" alt="" />
    </div>
    <!-- 歌词 -->
    <div class="lyric">
      <p v-for="(item, index) in lyricList" :key="index">
        {{ item }}
      </p>
    </div>
    <div class="processBar"></div>
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiaoxunhuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige"></use>
      </svg>
      <svg
        v-if="isPlay"
        class="icon bofang"
        aria-hidden="true"
        @click="playMusic"
      >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg v-else class="icon bofang" aria-hidden="true" @click="playMusic">
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-xiayigexiayishou"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gedan"></use>
      </svg>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { computed, reactive, ref } from 'vue'
export default {
  props: ['musicInfo', 'isPlay', 'playMusic', 'lyric'],
  setup(props) {
    console.log(props.musicInfo)
    let isShowLyric = ref(false)
    const store = useStore()
    console.log('lyricList', store.state.lyricList)
    let lyricList = reactive([])
    // 处理歌词
    // const lyricList = computed(() => {
    //   let arr = store.state.lyricList.split(/\n/gis).map((item) => {
    //     let min = item.slice(1, 3)
    //     let sec = item.slice(4, 6)
    //     let mill = item.slice(8, 11)
    //     return {
    //       min,
    //       sec,
    //       mill,
    //     }
    //   })
    // })
    // console.log(3333, lyricList)
    let goPlay = (num) => {
      let index = store.state.currentIndex + num
      console.log('index', index)
      if (index < 0) {
        index = store.state.playList.length - 1
      } else if (index == store.state.currentIndex) {
        index = 0
      }
      store.commit('setCurrentIndex', index)
    }
    return {
      store,
      isShowLyric,
      lyricList,
      goPlay,
    }
  },
}
</script>
<style lang="less" scoped>
.playMusic {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ccc;
  .bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-size: auto 100%;
    filter: blur(15px);
    background-position: center;
  }
  .topNav {
    width: 100%;
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    padding: 0 0.4rem;
    box-sizing: border-box;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      fill: #fff;
    }
    .center {
      font-size: 0.4rem;
      marquee {
        width: 4.5rem;
      }
    }
  }
  .content {
    position: absolute;
    width: 100%;
    height: 3rem;
    left: 0;
    top: 1.5rem;
    .needle {
      width: 3rem;
      height: auto;
      position: absolute;
      left: 50%;
      top: -0.5rem;
      transform-origin: 0.3rem;
      transform: rotate(-10deg);
      z-index: 10;
      transition: all 1s;
    }
    .active {
      width: 3rem;
      height: auto;
      position: absolute;
      left: 50%;
      top: -0.5rem;
      transform-origin: 0.3rem;
      transform: rotate(15deg);
      z-index: 10;
      transition: all 1s;
    }
    .circle {
      width: 5.5rem;
      height: auto;
      position: absolute;
      left: calc(50% - 2.75rem);
      top: calc(50% + 1.5rem);
    }
    .ig {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 2rem;
      position: absolute;
      left: calc(50% - 1.75rem);
      top: calc(50% + 2.5rem);
    }
  }
  .footer {
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    height: 1.2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    box-sizing: border-box;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      fill: #fff;
    }
    .bofang {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style> 